<template>
  <cliToolBox :draggable="false" :toolFix="true">
    <Dropdown trigger="hover" transfer>
      <Tooltip class="ivu-ml" content="列设置" placement="top" transfer>
        <i-link>
          <Icon type="md-options"/>
        </i-link>
      </Tooltip>
      <DropdownMenu v-if="!!gantt" slot="list">
        <div class="ivu-p-8">列展示</div>
        <Divider size="small" class="ivu-mt-8 ivu-mb-8"/>
        <template v-for="(item,i) in columns">
          <li v-if="!!item.selectable" class="ivu-dropdown-item" :key="item.name" @click="toggleColumns(item,i)">
            <Checkbox :value="!item.hide"></Checkbox>
            <span>{{ item.label }}</span>
          </li>
        </template>
      </DropdownMenu>
    </Dropdown>
    <Tooltip class="ivu-ml" content="保存" placement="top" transfer>
      <i-link>
        <Icon type="md-checkbox-outline" @click="submit"/>
      </i-link>
    </Tooltip>
    <Tooltip class="ivu-ml" content="导出excel" placement="top" transfer>
      <i-link>
        <Icon type="md-grid" @click="exportExcel"/>
      </i-link>
    </Tooltip>
    <Tooltip class="ivu-ml" content="切换视图" placement="top" transfer>
      <i-link>
        <Icon type="md-eye" @click="toggleView"/>
      </i-link>
    </Tooltip>
    <Tooltip class="ivu-ml" content="裕度" placement="top" transfer>
      <i-link>
        <Icon type="md-barcode" value="显示裕度" @click="toggleSlack"/>
      </i-link>
    </Tooltip>
    <Tooltip class="ivu-ml" content="关键路径" placement="top" transfer>
      <i-link>
        <Icon type="md-git-merge" value="显示关键路径" @click="updateCriticalPath"/>
      </i-link>
    </Tooltip>
    <Tooltip class="ivu-ml" content="刷新" placement="top" transfer>
      <i-link>
        <Icon type="md-refresh-circle" @click="refresh"/>
      </i-link>
    </Tooltip>
    <Select @on-change="groupBy" transfer placeholder="请选择分组项">
      <Option value="false">(取消分组)</Option>
      <Option v-for="(item,i) in columns" :key="i" v-if="item.grouped" :value="item.name">{{ item.label }}</Option>
    </Select>
  </cliToolBox>
</template>

<script>
export default {
  name: "project-toolbox",
  inject: ['toggleSlack','updateCriticalPath','groupBy','toggleSlack','getData','submit','refresh','exportExcel'],
  props:{
    gantt:Object,
    columns:Array
  },
  computed:{
  },
  methods:{
    toggleColumns(item,i){
      item.hide=!item.hide;
      this.gantt.getGridColumn(item.name).hide=item.hide;
      this.gantt.render();
    },
    toggleView(){
      if(gantt.config.show_grid&&gantt.config.show_chart){
        this.gantt.config.show_chart =false;
        this.gantt.render()
      }else if(gantt.config.show_grid&&!gantt.config.show_chart){
        this.gantt.config.show_chart =true;
        this.gantt.config.show_grid =false;
        this.gantt.render()
      }else{
        this.gantt.config.show_chart =true;
        this.gantt.config.show_grid =true;
        this.gantt.resetLayout();
        // this.gantt.render();
      }
      console.log(gantt.config);
      // gantt.render()
    },
  }
}
</script>

<style scoped>

</style>